<section>
  <h4>If the length exceeds the maximum, the line breaks.<!--超长换行--></h4>
  <div class="row">
    <div class="col-md-5">
      <d-select
        [overview]="'underlined'"
        [placeholder]="'please select'"
        [options]="options"
        [isSearch]="true"
        [readonly]="true"
        [multiple]="true"
        [(ngModel)]="select1"
        [filterKey]="'name'"
        [extraConfig]="{ labelization: { enable: true, overflow: 'multiple-line' } }"
        [size]="'sm'"
      ></d-select>
    </div>
    <div class="col-md-1">
      <d-button bsStyle="common" (btnClick)="changeSelect()">Change default</d-button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <pre>Current Select: {{ select1 | json }}</pre>
    </div>
  </div>
</section>
<section>
  <h4>
    If the length exceeds the upper limit, a single line is retained and a vertical scroll bar is displayed.<!--超长单行、出现竖向滚动条-->
  </h4>
  <div class="row">
    <div class="col-md-5">
      <d-select
        [options]="options"
        [isSearch]="true"
        [readonly]="true"
        [multiple]="true"
        [(ngModel)]="select2"
        [filterKey]="'name'"
        [extraConfig]="{ labelization: { enable: true, overflow: 'scroll-y' } }"
        [size]="'sm'"
      ></d-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <pre>Current Select: {{ select2 | json }}</pre>
    </div>
  </div>
</section>
<section>
  <h4>
    If the length exceeds the limit, a single line is retained. The maximum width of the label can be configured.<!--超长单行，配置标签的最大宽度-->
  </h4>
  <div class="row">
    <div class="col-md-5">
      <d-select
        [options]="options"
        [isSearch]="true"
        [readonly]="true"
        [multiple]="true"
        [(ngModel)]="select3"
        [filterKey]="'name'"
        [extraConfig]="{
          labelization: { enable: true, labelMaxWidth: '120px' }
        }"
        [size]="'sm'"
      ></d-select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <pre>Current Select: {{ select3 | json }}</pre>
    </div>
  </div>
</section>
